<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    :isDetail="true"
    :showFooter="showEdit"
    @ok="handleSubmit"
    @close="closeFunc"
    width="80%"
    title="司机/车辆详情"
  >
    <template #titleToolbar> <span class="c-emerald" @click="editStatus">编辑</span> </template>

    <!-- <p class="h-20">Content Message</p> -->
    <div class="pd-10">
      <!-- 顶部 -->
      <!-- <div class="flex justify-between mt-4 mb-4">
        <div>
          <div class="c-black">广东海赢国际物流有限公司</div>
        </div>
        <div>LOGO</div>
      </div> -->
      <!-- table切换栏 -->
      <!-- 下部组件 -->
      <Tabs v-model:activeKey="tableIndex" type="card" @change="setTable">
        <TabPane key="1" tab="司机" />
        <TabPane key="2" tab="车辆" />
      </Tabs>

      <div class="flex" v-show="tableIndex == '1'">
        <!-- 左边LOGO -->
        <div>
          <div class="w-30 h-30">
            <BasicForm
              @register="registerValiateDriverPhoto"
              :showSubmitButton="false"
              :key="componentKey"
              :model="driverCar_driverPhotoFrontSetModalRef"
              :fileList="imgList"
              :showResetButton="false"
              class="my-5 flex justify-center"
            />
          </div>
          <div style="text-align: center">司机头像</div>
        </div>
        <div>
          <BasicForm @register="deriverRequirements" :model="deriverRequirementsSetModalRef" />
          <div class="flex flex-wrap">
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate1"
                  :showSubmitButton="false"
                  :fileList="imgList"
                  :model="driverCar_idCardFrontSetModalRef"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>
              <div style="text-align: center">身份证-正</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate2"
                  :showSubmitButton="false"
                  :model="driverCar_idCardBackSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>

              <div style="text-align: center">身份证-反</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate3"
                  :showSubmitButton="false"
                  :model="driverCar_driverLicenseSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>

              <div style="text-align: center">驾驶证</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate4"
                  :showSubmitButton="false"
                  :model="driverCar_drivingPermitSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>
              <div style="text-align: center">行驶证</div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex" v-show="tableIndex == '2'">
        <div class="flex">
          <div>
            <div class="w-30 h-30">
              <BasicForm
                @register="registerValiateCarPhoto"
                :showSubmitButton="false"
                :fileList="imgList"
                :model="driverCar_carPhotoFrontSetModalRef"
                :showResetButton="false"
                class="my-5 flex justify-center"
              />
            </div>
            <div style="text-align: center">车辆照片</div>
          </div>
        </div>
        <!-- 图片上传 -->
        <div class="">
          <BasicForm @register="carRequirements" :model="carRequirementsSetModalRef" />
          <div class="flex flex-wrap">
            <div class="">
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate5"
                  :showSubmitButton="false"
                  :model="driverCar_operationalQualificationsSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>
              <div style="text-align: center">运营资质</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate6"
                  :showSubmitButton="false"
                  :model="driverCar_annualCheckUpSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>

              <div style="text-align: center">年检证明</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate7"
                  :showSubmitButton="false"
                  :model="driverCar_carFrontSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>

              <div style="text-align: center">车辆-正面</div>
            </div>
            <div>
              <div class="w-30 h-30">
                <BasicForm
                  @register="registerValiate8"
                  :showSubmitButton="false"
                  :model="driverCar_carSideSetModalRef"
                  :fileList="imgList"
                  :showResetButton="false"
                  class="my-5 flex justify-center"
                />
              </div>
              <div style="text-align: center">车辆-侧面</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, useForm } from '@/components/Form';
  import { addresSchemas, carSchemas } from './index';
  import { useMessage } from '@/hooks/web/useMessage';
  import {
    imgUuid,
    changeValue,
    schemasDriverPhoto,
    schemasCarPhoto,
    schemasValiate1,
    schemasValiate2,
    schemasValiate3,
    schemasValiate4,
    schemasValiate5,
    schemasValiate6,
    schemasValiate7,
    schemasValiate8,
  } from './upLoadImage';
  import { getUserFiles } from '@/api/common/index';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { getDriverDeatial, UpdateDriverInfo } from '@/api/eslogis-tps/index';
  // import BasicUploadDragger from '@/components/UploadDragger/BasicUploadDragger.vue';
  // import { buildUUID } from '@/utils/uuid';
  // import { ImagePreview } from '@/components/Preview';
  // import { uploadApi, renameFileApi, delFileApi, downloadFileApi } from '@/api/escloud/upload';
  const driverCar_driverPhotoFrontSetModalRef = ref({});
  const driverCar_idCardFrontSetModalRef = ref({});
  const driverCar_carPhotoFrontSetModalRef = ref({});
  const driverCar_idCardBackSetModalRef = ref({});
  const driverCar_driverLicenseSetModalRef = ref({});

  const driverCar_operationalQualificationsSetModalRef = ref({});
  const driverCar_drivingPermitSetModalRef = ref({});
  const driverCar_annualCheckUpSetModalRef = ref({});
  const driverCar_carFrontSetModalRef = ref({});
  const driverCar_carSideSetModalRef = ref({});

  const deriverRequirementsSetModalRef = ref({});
  const carRequirementsSetModalRef = ref({});
  // const driverCar_idCardFrontSetModalRef = ref({});
  // const driverCar_idCardFrontSetModalRef = ref({});

  const [deriverRequirements, { validate: deriverRequirementsForm }] = useForm({
    layout: 'vertical',
    baseColProps: {
      span: 6,
    },
    schemas: addresSchemas,
    showActionButtonGroup: false,
  });
  // 司机照片
  const [
    registerValiateDriverPhoto,
    { updateSchema: driverCar_driverPhoto, resetFields: resetFieldsdriverCar_driverPhoto },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasDriverPhoto,
    actionColOptions: {
      span: 18,
    },
  });

  // 车辆照片
  const [
    registerValiateCarPhoto,
    { updateSchema: driverCar_carPhoto, resetFields: resetFieldsdriverCar_carPhoto },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasCarPhoto,
    actionColOptions: {
      span: 18,
    },
  });
  // 身份证正面
  const [
    registerValiate1,
    { updateSchema: driverCar_idCardFront, resetFields: resetFieldsdriverCar_idCardFront },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate1,
    actionColOptions: {
      span: 18,
    },
  });
  // 身份证反面
  const [
    registerValiate2,
    { updateSchema: driverCar_idCardBack, resetFields: resetFieldsdriverCar_idCardBack },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate2,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate3,
    { updateSchema: driverCar_driverLicense, resetFields: resetFieldsdriverCar_driverLicense },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate3,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate4,
    { updateSchema: driverCar_drivingPermit, resetFields: resetFieldsdriverCar_drivingPermit },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate4,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate5,
    {
      updateSchema: driverCar_operationalQualifications,
      resetFields: resetFieldsdriverCar_operationalQualifications,
    },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate5,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate6,
    { updateSchema: driverCar_annualCheckUp, resetFields: resetFieldsdriverCar_annualCheckUp },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate6,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate7,
    { updateSchema: driverCar_carFront, resetFields: resetFieldsdriverCar_carFront },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate7,
    actionColOptions: {
      span: 18,
    },
  });
  const [
    registerValiate8,
    { updateSchema: driverCar_carSide, resetFields: resetFieldsdriverCar_carSide },
  ] = useForm({
    labelWidth: 160,
    schemas: schemasValiate8,
    actionColOptions: {
      span: 18,
    },
  });
  // const props = defineProps({
  //   queryParams: { type: Object },
  // });
  // const params = reactive({
  //   configCode: 'eslogis_order',
  //   label: 'xxx',
  //   batchId: '',
  // });
  const { createMessage } = useMessage();
  const imgList = [];
  const componentKey = ref(0);
  // const UploadList = reactive(['身份证-正', '身份证-反', '驾驶证', '行驶证']);
  // const fileList = reactive([]);
  const [carRequirements, { validate: carRequirementsForm, setFieldsValue: setFieldsValuecCar }] =
    useForm({
      layout: 'vertical',
      baseColProps: {
        span: 6,
      },
      schemas: carSchemas,
      showActionButtonGroup: false,
    });
  const carData = reactive({});
  const [register, { closeDrawer }] = useDrawerInner((data) => {
    getDriverDeatial(data.id).then((res) => {
      carData.value = res;
      deriverRequirementsSetModalRef.value = res;
      carRequirementsSetModalRef.value = res;
      if (res.batchId) {
        changeValue(res.batchId);
        driverCar_driverPhoto([
          {
            field: 'driverCar_driverPhoto',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_carPhoto([
          {
            field: 'driverCar_carPhoto',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_idCardFront([
          {
            field: 'driverCar_idCardFront',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_idCardBack([
          {
            field: 'driverCar_idCardBack',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_driverLicense([
          {
            field: 'driverCar_driverLicense',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_drivingPermit([
          {
            field: 'driverCar_drivingPermit',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_operationalQualifications([
          {
            field: 'driverCar_operationalQualifications',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_annualCheckUp([
          {
            field: 'driverCar_annualCheckUp',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_carFront([
          {
            field: 'driverCar_carFront',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        driverCar_carSide([
          {
            field: 'driverCar_carSide',
            componentProps: { uploadParams: { batchId: res.batchId } },
          },
        ]);
        getUserFiles({
          batchId: res.batchId,
        }).then((res) => {
          console.log('getUserFiles', res);
          let tempObj = {};
          let valueTemp = {};

          res.forEach((item) => {
            tempObj[item.label] = {
              ...item,
              uid: item.id,
              name: item.fileName,
              url: item.fileUrl,
              status: 'done',
            };
          });

          Object.keys(tempObj).forEach((key) => {
            valueTemp[key] = tempObj[key];
          });
          driverCar_idCardFrontSetModalRef.value = valueTemp;
          driverCar_driverPhotoFrontSetModalRef.value = valueTemp;
          driverCar_idCardFrontSetModalRef.value = valueTemp;
          driverCar_carPhotoFrontSetModalRef.value = valueTemp;
          driverCar_idCardBackSetModalRef.value = valueTemp;
          driverCar_driverLicenseSetModalRef.value = valueTemp;

          driverCar_operationalQualificationsSetModalRef.value = valueTemp;
          driverCar_drivingPermitSetModalRef.value = valueTemp;
          driverCar_annualCheckUpSetModalRef.value = valueTemp;
          driverCar_carFrontSetModalRef.value = valueTemp;
          driverCar_carSideSetModalRef.value = valueTemp;
        });
      }

      // setFieldsValuecCar(res)
    });
    // 方式1
  });
  const tableIndex = ref('1');
  const showEdit = ref(false);
  const emit = defineEmits(['close']);
  onMounted(() => {
    console.log('showCar-----------------------', imgUuid);

    // showCar.value = false;s
  });
  function setTable(index) {
    setFieldsValuecCar(carData.value);
    console.log(index);
    // if (index == 2 && !showCar.value) {
    //   console.log(carData.value);
    //   nextTick(() => {
    //     setFieldsValuecCar(carData.value);
    //     showCar.value = true;
    //   });
    // }
  }

  function editStatus() {
    showEdit.value = true;
  }
  function closeFunc() {
    console.log('关闭');
    resetFieldsdriverCar_idCardBack();
    resetFieldsdriverCar_carSide();
    resetFieldsdriverCar_carFront();
    resetFieldsdriverCar_annualCheckUp();
    resetFieldsdriverCar_operationalQualifications();
    resetFieldsdriverCar_drivingPermit();
    resetFieldsdriverCar_driverLicense();
    resetFieldsdriverCar_idCardBack();
    resetFieldsdriverCar_idCardFront();
    resetFieldsdriverCar_carPhoto();
    resetFieldsdriverCar_driverPhoto();
    closeDrawer();
  }
  async function handleSubmit() {
    console.log(imgUuid);

    try {
      const [addresSchemas, carSchemas] = await Promise.all([
        deriverRequirementsForm(),
        carRequirementsForm(),
      ]);
      console.log('imgUuid----------', imgUuid, carData.value.batchId);
      console.log(addresSchemas, carSchemas);
      const data = {
        ...addresSchemas,
        ...carSchemas,
        batchId: imgUuid,
        id: carData.value.id,
      };
      console.log('参数', data);

      UpdateDriverInfo(data).then((res) => {
        console.log(res);

        createMessage.success('处理成功');
        emit('reload');
        closeDrawer();
      });
    } catch (error) {
      console.log(error);
    }
  }
</script>
